<template>
	<van-nav-bar title="代理产品" />

	<van-cell-group v-if="formData.type=='终端代理'" inset style="margin-top: 0.625rem;margin-bottom: 0.625rem;">
		<van-field label="终端签订量" :placeholder="formData.zds[0].zdName+'('+formData.zds.length+')'" required />
	</van-cell-group>

	<more-picker ref="morePickerRef" :popupVisible="popupVisible" is-link :options="dataList" @selected="mixProduct" label="产品"
		placeholder="请选择产品" />

	<van-list class="content">
		<van-cell-group style="margin-top: 0.625rem;margin-bottom: 0.625rem;" v-for="(item,index) in formData.products"
			:key="index" inset>
			<van-card thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
				  <!-- 删除按钮放置在右上角 -->
				  <template #title>
				    <div style="position: relative;">
				      {{ item.name }}
				      <!-- 删除图标 -->
				      <van-icon
						@click="delProduct(index)"
				        name="delete" 
				        style="position: absolute; right: -10px; font-size: 18px; color: #ff0000;" 
				      />
				    </div>
				  </template>
				<template #desc>
					<van-row :gutter="[10, 10]" style="margin-top: 0.625rem;">
						<van-col span="12">工厂: {{item.factory}}</van-col>
						<van-col span="12">规格: {{item.spec}}</van-col>
						<van-col span="12">单位: {{item.unit}}</van-col>
						<van-col span="12">效期: {{item.lifespan}}</van-col>
						<van-col span="24">件装量: {{item.packQuantity}}</van-col>
					</van-row>
				</template>
			</van-card>
			<van-field v-model="price" label="结算价" placeholder="请设置结算价" type="number" required />
			<div v-if="formData.type != '终端代理'">
				<van-cell v-if="formData.type == '省级代理'" title="代理范围" :value="item.province" />
				<van-cell v-else-if="formData.type == '城市代理'" title="代理范围" :value="item.province+'-'+item.city" />
				<van-cell v-else title="代理范围" :value="item.province+'-'+item.city+'-'+item.area" />
			</div>

		</van-cell-group>
	</van-list>
	<van-action-sheet cancel-text="取消" @cancel="waychoice=false" description="任务量" :show="waychoice"
		:actions="menuActions" @select="onSelect" close-on-click-action />

	<van-action-bar>
		<van-action-bar-icon icon="arrow-left" text="上一步" />
		<van-action-bar-icon icon="cart-o" text="待定" />
		<van-action-bar-button color="#0093ff" type="warning" text="添加产品" @click="addProduct" />
		<van-action-bar-button color="#00bffe" type="danger" text="下一步" @click="waychoice = true" />
	</van-action-bar>

</template>

<script setup lang="ts">
	import { useAgreementStore } from '@/store'
	import { showConfirmDialog, showToast } from 'vant'
	import { ref, onMounted } from 'vue';
	import { useRouter } from 'vue-router'
	const morePickerRef = ref(null);
	const router = useRouter()

	const store = useAgreementStore();
	const formData = store.agreement;
	const popupVisible = ref(false)

	onMounted(() => {
		addProduct();
	});
	
	const delProduct = (index:number)=>{
		showConfirmDialog({
		  title: '提示',
		  message: '当前为删除操作请注意',
		})
		.then(() => {
		  formData.products.splice(index,1);
		  showToast("删除成功")
		})
		.catch(()=>{
			showToast("取消")
		});
	}

	const addProduct = () => {
		popupVisible.value = true;
	}
	const waychoice = ref(false)
	const menuActions = ref([{
		name: '推广任务'
	},
	{
		name: '无', child: [{ name: '开发任务' }, { name: '无', child: [{ name: '活动任务' }, { name: '无', child: [{ name: '配送商业&联系人', child: [] }] }] }]
	}
	]);
	// 菜单项选择后的处理函数
	const onSelect = (action : any) => {
		// 根据选择的项修改菜单内容
		if ('推广任务' == action.name) {
			router.push('/popularizetasks')
		} else if ('开发任务' == action.name) {
			router.push('/expandtasks')
		} else if ('活动任务' == action.name) {
			router.push('/activitytasks')
		} else if ('配送商业&联系人' == action.name) {
			router.push('/businessperson')
		} else {
			if (action.child.length == 0) {
				showToast('无任何任务量约束')
			} else {
				menuActions.value = action.child;
			}
		}
	};

	const price = ref(0);
	const dataList = ref([{
		id: "product1",
		factory: "工厂001",
		text: "布地奈德001(1ml/袋)",
		name: "布地奈德001",
		spec: "1ml/袋",
		unit: "盒",
		lifespan: "24个月",
		packQuantity: "200"
	}, {
		id: "product2",
		factory: "工厂002",
		text: "布地奈德002(1ml/袋)",
		name: "布地奈德002",
		spec: "1ml/袋",
		unit: "盒",
		lifespan: "24个月",
		packQuantity: "200"
	}, {
		id: "product3",
		factory: "工厂003",
		text: "布地奈德003(1ml/袋)",
		name: "布地奈德003",
		spec: "1ml/袋",
		unit: "盒",
		lifespan: "24个月",
		packQuantity: "200"
	}, {
		id: "product4",
		factory: "工厂004",
		text: "布地奈德004(1ml/袋)",
		name: "布地奈德004",
		spec: "1ml/袋",
		unit: "盒",
		lifespan: "24个月",
		packQuantity: "200"
	},
	]);

	const mixProduct = (products : []) => {
		products.forEach((product : any) => {
			if (formData.type == '终端代理') {
				formData.zds.forEach((zd : any) => {
					let obj = Object.assign({}, product);
					obj.province = zd.province;
					obj.city = zd.city;
					obj.area = zd.area;
					obj.zdName = zd.zdName;
					obj.price = 0;
					formData.products.push(obj);
				});
			} else {
				formData.areas.forEach((area : any) => {
					let obj = Object.assign({}, product);
					switch (formData.type) {
						case '省级代理':
							obj.province = area.province;
							obj.city = '';
							obj.area = '';
							obj.price = 0;
							break;
						case '城市代理':
							obj.province = area.province;
							obj.city = area.city;
							obj.area = '';
							obj.price = 0;
							break;
						case '区县代理':
							obj.province = area.province;
							obj.city = area.city;
							obj.area = area.area;
							obj.price = 0;
							break;
						default:
					}
					formData.products.push(obj);
				});
			}
		})
		popupVisible.value = false;
	}
</script>

<style>
</style>